<template>
  <div class="itemList">
    <v-row class="mt-0">
      <v-col cols="3" class="py-2 d-flex align-center card-lable">
        <span>{{ itemLabel }} </span>
      </v-col>
      <v-col class="py-1" v-if="type === 'input'">
        <v-text-field
          :autofocus="autofocus"
          class="my-0"
          dense
          hide-details
          @keydown.13="onEnter"
          v-model="lazyValue"
          :placeholder="placeholder"
          @input="onInput"
          @change="onChange"
          @focus="onFocus"
          @blur="onBlur"
        >
        </v-text-field>
      </v-col>
      <v-col v-else-if="type === 'text'" class="py-2 card-value">{{
        itemText
      }}</v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  name: "itemList",
  props: {
    type: {
      type: String,
      default: "input",
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ["input", "text"].indexOf(value) !== -1;
      },
    },
    itemText: {
      type: String,
      default: "内容",
    },
    itemLabel: {
      type: String,
      default: "标题",
    },
    value: null,
    autofocus: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "请输入",
    },
  },
  data() {
    return { lazyValue: this.value };
  },
  watch: {
    value(val) {
      this.lazyValue = val;
    },
  },
  computed: {
    internalValue: {
      get() {
        return this.lazyValue;
      },

      set(val) {
        this.lazyValue = val;
        this.$emit("input", val);
      },
    },
  },
  methods: {
    onEnter() {
      this.$emit("onEnter");
    },
    onInput(val) {
      this.$emit("input", val);
    },
    onChange(val) {
      this.$emit("change", val);
    },
    onFocus() {
      this.$emit("focus");
    },
    onBlur() {
      this.$emit("blur");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>